<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
	<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/common.css" />
	<style>
		.title-left {
			margin-right: 0.4rem;
		}

		body {
			background: #f1f1f1;
		}

		.order-list {
			padding: 1rem;
			background: #fff;
			margin-top: 0.4rem;
		}

		.order-list .order-head {
			padding-bottom: 1rem;
		}

		.order-list .order-item {
			padding: 0 0 0.75rem;
		}

		.order-list .media {
			width: 3.6rem;
		}

		.textBox {
			min-height: 4.5rem;
			padding-left: 0.5rem;
		}

		.fot-btn>div {
			width: 3.6rem;
			height: 1.4rem;
			border: 1px solid #adadad;
			border-radius: 0.8rem;
			text-align: center;
			line-height: 1.3rem;
			font-size: 0.6rem;
			color: #adadad;
		}

		.fot-btn>div.collect {
			color: #E73450;
			margin-left: 0.7rem;
			border: 1px solid #E73450;
		}

		.order-list .tag {
			margin-top: -0.1rem;
			margin-right: 0.4rem;
			display: inline-block;
			color: #FFF;
			background: #FA7D83;
			border-radius: 0.1rem;
			font-size: 0.4rem;
			padding: 0 0.15rem;
			line-height: 0.75rem;
			vertical-align: middle;
		}

		.order-list .tag.on {
			background: #FFC667;
		}

		.no-more {
			padding: 0.6rem 0;
		}
	</style>
</head>

<body>
	<div>
		<div class="notData aui-hide aui-flex-row aui-flex-middle aui-flex-center">
			<img src="../../image/notData/04.png" alt="">
			<p class="color-ad">您还没有相关订单哟</p>
		</div>
		<div id="order-list-html"></div>
		<script type="text/x-dot-template" id="order-list-tpl">
		{{for(var i in it){}}
		<div class="order-list" data-id="{{=it[i].order_id}}" data-price="{{=it[i].order_pay_price}}" data-sn="{{=it[i].order_sn}}">
			<div class="order-head aui-flex-col aui-flex-col aui-flex-between">
				<div class="flex-auto title-left aui-font-size-12 color-555">
					{{if(it[i].goods_type == 1){}}
						<span class="tag">大礼包</span>
					{{ }else if(it[i].goods_type == 2){}}
						<span class="tag on">自营商品</span>
					{{}else if(it[i].goods_type == 3){}}
						<span class="tag on">积分换</span>
					{{}}}
					{{=it[i].order_addtime}}
				</div>
				{{if(it[i].order_status ==1 ){}}
					<div class="color-e7">待付款</div>
				{{ }else if(it[i].order_status == 2){ }}
					<div class="color-e7">待发货</div>
				{{ }else if(it[i].order_status == 3){ }}
					<div class="color-e7">已发货</div>
				{{ }else if(it[i].order_status == 4){ }}
					<div class="color-e7">交易成功</div>
				{{ }else if(it[i].order_status == -1){ }}
					<div class="color-e7">交易关闭</div>
				{{}}}
			</div>
			<div class="order-item" tapmode onclick="openDetail('order_detail_win',this)">
				<div class=" aui-flex-col aui-flex-middle">
					<div class="media"><img src="{{=it[i].goods_cover}}" alt=""></div>
					<div class="flex-auto aui-padded-l-10 aui-padded-r-15">
						<div class="aui-font-size-12 color-000 aui-ellipsis-2">{{=it[i].goods_name}}</div>
						<div class="color-555 aui-font-size-10 aui-ellipsis" style="padding-top:0.25rem">{{=it[i].order_goods_spec_names}}</div>
						<div class="aui-flex-col aui-flex-between aui-flex-middle">
							<div class="aui-font-size-14 color-000 aui-padded-t-5 flex-auto" id="price">
							{{if(it[i].order_goods_type == 3){}}
								{{=it[i].order_pay_price}}积分
							{{ }else{}}
								¥{{=it[i].order_pay_price}}
							{{}}}
							</div>
							<div class="aui-font-size-12 color-555 aui-padded-t-5">×{{=it[i].order_goods_count}}</div>
						</div>
					</div>
				</div>
			</div>
			{{if(it[i].order_status ==1 ){}}
				<div class="aui-flex-col aui-flex-right aui-padded-t-15 aui-border-t">
					<div></div>
					<div></div>
					<div>
						<p class="aui-text-right font-size-12 color-999">共{{=it[i].order_goods_count || '1'}}件商品&nbsp;&nbsp;合计<span class="color-000 aui-font-size-14 text-bold">￥{{=it[i].order_pay_price}}</span></p>
						<div class="fot-btn aui-flex-col aui-flex-right aui-margin-t-15">
							<div class="look" tapmode onclick="cancelOrder(this)">取消订单</div>
							{{if(it[i].order_goods_type == 3){}}
							<div class="collect" tapmode onclick="openUction(this)">兑换</div>
							{{ }else{}}
							<div class="collect" tapmode onclick="openPay(this)">付款</div>
							{{}}}
						</div>
					</div>
				</div>

			{{ }else if(it[i].order_status == 3){ }}
			<div class="aui-flex-col aui-flex-right aui-padded-t-15 aui-border-t">
				<div></div>
				<div></div>
				<div>
					<p class="aui-text-right font-size-12 color-999">共{{=it[i].order_goods_count || '1'}}件商品&nbsp;&nbsp;合计<span class="color-000 aui-font-size-14 text-bold">￥{{=it[i].order_pay_price}}</span></p>
					<div class="fot-btn aui-flex-col aui-flex-right aui-margin-t-15">
						<div class="look" tapmode onclick="openWin('logistics_detail_win')">查看物流</div>
						<div class="collect" tapmode onclick="confirmShop(this)">确认收货</div>
					</div>
				</div>
			</div>
			{{ }else if(it[i].order_status == 4){ }}
			<div class="aui-flex-col aui-flex-right aui-padded-t-15 aui-border-t">
				<div></div>
				<div></div>
				<div>
					<p class="aui-text-right font-size-12 color-999">共{{=it[i].order_goods_count || '1'}}件商品&nbsp;&nbsp;合计<span class="color-000 aui-font-size-14 text-bold">￥{{=it[i].order_pay_price}}</span></p>
					<div class="fot-btn aui-flex-col aui-flex-right aui-margin-t-15">
						<div class="collect" tapmode onclick="openWin('logistics_detail_win')">查看物流</div>
					</div>
				</div>
			</div>
			{{ }else if(it[i].order_status == -1){ }}
			<div class="aui-flex-col aui-flex-right aui-padded-t-15 aui-border-t">
				<div></div>
				<div></div>
				<div>
					<p class="aui-text-right font-size-12 color-999">共{{=it[i].order_goods_count || '1'}}件商品&nbsp;&nbsp;合计<span class="color-000 aui-font-size-14 text-bold">￥{{=it[i].order_pay_price}}</span></p>
					<div class="fot-btn aui-flex-col aui-flex-right aui-margin-t-15">
						<div class="look" tapmode onclick="delOrder(this)">删除订单</div>
					</div>
				</div>
			</div>
			{{}}}
		</div>
		{{}}}
		<div class="no-more aui-font-size-12 color-ad aui-text-center">—— 没有更多了 ——</div>
	</script>
	</div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var ORDER_STATUS = 0;
	apiready = function() {
		api.parseTapmode();
		api.addEventListener({
				name: 'cancelEvent'
		}, function(ret, err){
				if( ret ){
					getOrderList()
				}else{
						//  alert( JSON.stringify( err ) );
				}
		});
	api.addEventListener({
	    name: 'paySuccessEvent'
	}, function(ret, err){
	    if( ret ){
	         getOrderList()
	    }else{

	    }
	});
	getOrderList();
	};
	// 切换订单状态
	function changeStatus(n){
		switch (n) {
			case 0:
				ORDER_STATUS = 0;
				break;
			case 1:
				ORDER_STATUS = 1;
				break;
			case 2:
				ORDER_STATUS = 2;
				break;
			case 3:
				ORDER_STATUS = 3;
				break;
			case 4:
				ORDER_STATUS = 4;
				break;
			case -1:
				ORDER_STATUS = -1;
				break;
			default:
				ORDER_STATUS = 0;
		}
		getOrderList();
	}
	// 获取订单列表
function getOrderList(){
	if(ORDER_STATUS == 0){
		api.ajax({
		    url: BASE_URL_2 + 'App/Mall/orderLists',
		    method: 'post',
		    data: {
		        values: {
		            userid: getUserId(),
		        }
		    }
		},function(ret, err){
			// console.log(JSON.stringify(ret))
		    if (ret && ret.code == 1) {
					$$('.notData').addClass('aui-hide');
					var tpl = $$('#order-list-tpl').html();
					var tempFn = doT.template(tpl);
					$$('#order-list-html').html(tempFn(ret.data));
		    } else {
					var tpl = $$('#order-list-tpl').html('');
					$$('.notData').removeClass('aui-hide');
		    }
		});
	}else{
		api.ajax({
		    url: BASE_URL_2 + 'App/Mall/orderLists',
		    method: 'post',
		    data: {
		        values: {
		            userid: getUserId(),
								status: ORDER_STATUS
		        }
		    }
		},function(ret, err){
			// console.log(JSON.stringify(ret))
		    if (ret && ret.code == 1) {
					$$('.notData').addClass('aui-hide');
					var tpl = $$('#order-list-tpl').html();
					var tempFn = doT.template(tpl);
					$$('#order-list-html').html(tempFn(ret.data));
		    } else {
					$$('#order-list-html').html('');
					$$('.notData').removeClass('aui-hide');
		    }
		});
	}
}
	function openWin(url) {
		api.openWin({
			name: url,
			url: url + '.html'
		});
	}
// 打开订单详情
	function openDetail(url,el) {


		var _this = $$(el).parents('.order-list');
		var ORDER_ID = _this.data('id');
		api.openWin({
			name: url,
			url: url + '.html',
			pageParam: {
				ORDER_ID: ORDER_ID
			}
		});
	}
	function openPay(el){
		var _this = $$(el).parents('.order-list');
		var orderId = _this.data('id');
		var price = _this.data('price');
		var orderSn = _this.data('sn');
		api.openFrame({
			name:'mask_pay',
			url:'widget://html/mask_pay.html',
			rect: {
				x: 0,
				y: 0,
				w: 'auto',
				h: 'auto'
			},
			animation: {
				type: 'fade',
				duration:300
			},
			pageParam: {
				orderId: orderId,
				price: price,
				orderSn: orderSn
			}
		})
	}
	function openUction(el){
		var _this = $$(el).parents('.order-list');
		var orderId = _this.data('id');
		var totalUcion = _this.data('price');
		var orderSn = _this.data('sn');
		api.openWin({
				name: 'Uorder_confirm_win',
				url: '../giftBag/Uorder_confirm_win.html',
				pageParam: {
						orderId: orderId,
						totalUcion: totalUcion
				}
		});

	}

	// 取消订单
	function cancelOrder(el){
		var _this = $$(el).parents('.order-list');
		var orderId = _this.data('id');
		console.log(orderId)
		api.ajax({
		    url: BASE_URL_2 + 'App/Mall/orderCancel',
		    method: 'post',
		    data: {
		        values: {
		            id: orderId,
								userid: getUserId()
		        }
		    }
		},function(ret, err){
		    if (ret && ret.code == 1) {
					toast(ret.msg)
					setTimeout(function(){
						getOrderList()
					},200)
		        // console.log( JSON.stringify( ret ) );
		    } else {
		        toast(ret.msg)
		    }
		});

	}
	// 删除订单
	function delOrder(el){
		var _this = $$(el);
		var order = _this.parents('.order-list');
		var orderId = order.data('id');
		var confirmMaskTxt = ['确认删除订单？','取消','确认删除'];
		openConfirmMask(confirmMaskTxt,'del('+orderId+')');
	}
	function del(Id){
		api.ajax({
			url: BASE_URL_2 + 'App/Mall/orderDelete',
			method: 'post',
			data: {
				values: {
					id: Id,
					userid: getUserId()
				}
			}
		},function(ret, err){
			// console.log(JSON.stringify(ret))
			if (ret) {
				if(ret.code == 1){
					toast(ret.msg);
						getOrderList()
				}else{
					toast(ret.msg);
				}
			}
		});
	}
	// 确认收货
	function confirmShop(el){
		var _this = $$(el);
		var order = _this.parents('.order-list');
		var orderId = order.data('id');
		var confirmMaskTxt = ['您确认已收到商品？确认收货后，订单交易完成。','取消','确认'];
		openConfirmMask(confirmMaskTxt,'confirm('+ orderId +')');
	}
	// function confirm(){
	// 	api.openWin({
	// 	    name: 'order_detail_win',
	// 	    url: 'order_detail_win.html',
	// 	    pageParam: {
	// 	        confirm: '确认收货'
	// 	    }
	// 	});
	// }
	function confirm(Id){
		api.ajax({
			url: BASE_URL_2 + 'App/Mall/orderFinish',
			method: 'post',
			data: {
				values: {
					id: Id,
					userid: getUserId()
				}
			}
		},function(ret, err){
			// console.log(JSON.stringify(ret))
			if (ret) {
				if(ret.code == 1){
					toast(ret.msg);
						getOrderList()
				}else{
					toast(ret.msg);
				}
			}
		});
	}
</script>

</html>
